<template>
    <div class="carouse-img" @mousewheel.prevent>
        <div class="indicator-container">
            <ul>
                <li v-for="item in 4" :key="item" class="indicator-item" :class="getIndicatorClass(item)" @click="indicatorClick(item)"></li>
            </ul>
        </div>
        <div class="image-container image1" style="height: calc(100vh - 60px);">
            <div class="welcome">
                <p>欢迎来到</p>
                <p>大迈冷链智慧管理平台</p>
                <div class="btn-container">
                    <div class="btn" style="margin-right: 10px; background-color: rgba(79, 104, 232, 1); border: none" @click="toClick">登录</div>
                    <div class="btn" style="margin-left: 10px">注册</div>
                </div>
            </div>
            <div class="toBottom" @click="toBottom(0)">
                <Icon type="ios-arrow-down" color="#ffffff" size="50"/>
            </div>
        </div>
<!--        <div class="image-container image2" style="height: calc(100vh - 60px);">-->
<!--            <div class="describe">-->
<!--                <p>供应链业务</p>-->
<!--                <div class="btn-container">-->
<!--                    <div class="btn" style="margin-right: 10px">采购</div>-->
<!--                    <div class="btn" style="margin-left: 10px">销售</div>-->
<!--                </div>-->
<!--                <p>解决核心企业应付账款问题，加速核心企业资金回流，帮助上游供应商加速回款，减轻下游经销商采购资金压力，加快企业资金流动。</p>-->
<!--            </div>-->
<!--            <div class="toBottom" @click="toBottom(1)">-->
<!--                <Icon type="ios-arrow-down" color="#ffffff" size="50"/>-->
<!--            </div>-->
<!--        </div>-->
        <div class="image-container image3" style="height: calc(100vh - 60px);">
            <div class="describe">
                <p>物流业务</p>
                <div class="btn-container">
                    <div class="btn" style="margin-right: 10px">海运</div>
                    <div class="btn" style="margin-left: 10px">陆运</div>
                </div>
                <p>在冷链业务的基础上，大迈六宝智冷基于大迈六宝物流多业务板块服务体系的基础上，实现了向供应链服务的延伸，包括网络货运、集装箱堆场、国际货运代理、船舶代理等板块，均可向冷链业务提供服务。</p>
            </div>
            <div class="toBottom" @click="toBottom(2)">
                <Icon type="ios-arrow-down" color="#ffffff" size="50"/>
            </div>
        </div>
        <div class="image-container image4" style="height: calc(100vh - 60px);">
            <div class="describe">
                <p>仓储业务</p>
                <div class="btn-container">
                    <div class="btn" style="margin-right: 10px">入库</div>
                    <div class="btn" style="margin-left: 10px">出库</div>
                </div>
                <p>在大迈六宝智冷在天津、青岛、上海等主要口岸都配有智能化冷链仓库，在迎合当地口岸贸易模式基础上提供冷链货物的入库、查验、消杀、提货、加工等服务。</p>
            </div>
            <div class="toBottom" @click="toBottom(3)">
                <Icon type="ios-arrow-down" color="#ffffff" size="50"/>
            </div>
        </div>
        <div class="image-container image5" style="height: calc(100vh - 60px);">
            <div class="describe">
                <p>全方位掌控采购和履行订单直到最终交付</p>
                <div class="btn-container">
                    <div class="btn" style="margin-right: 10px">登录</div>
                    <div class="btn" style="margin-left: 10px">注册</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import $ from 'jquery';
import _ from 'lodash';
export default {
    name: "CarouseImg",
    data() {
        return {
            currentPage: 0,
            showContent: false,
            showKey: '',
            childList: [],
            menuList: this.$dataInfo.menuList,
            currentImageNum: 0,
            pageTurningInterval: 700
        }
    },
    methods: {
        getIndicatorClass(item) {
            if (item < 5 && item === (this.currentImageNum + 1)) {
                return 'indicator-item_active';
            }
            if (item === 5 && this.currentImageNum >= 4) {
                return 'indicator-item_active';
            }
            return '';
        },
        toBottom(num) {
            this.currentImageNum = num + 1;
        },
        handleScroll(e) {
            if (e.deltaY > 0 && this.currentImageNum < 5) {
                this.currentImageNum = this.currentImageNum + 1;
            }
            if (e.deltaY < 0 && this.currentImageNum !== 0) {
                this.currentImageNum = this.currentImageNum - 1;
            }
            console.log(this.currentImageNum);
        },
        throttleHandleScroll() {
            return _.throttle(this.handleScroll, 400, { trailing: false });
        },
        indicatorClick(num) {
            this.currentImageNum = num -1;
        },
        toClick() {
            this.$router.push({
                name: 'login'
            });
        }
    },
    watch: {
        currentImageNum(val) {
            $('.ivu-layout-content').stop();
            $('.ivu-layout-content').animate({scrollTop: (this.currentImageNum * $('.image-container').height())}, this.pageTurningInterval);
        }
    },
    mounted() {
        window.addEventListener('mousewheel', this.throttleHandleScroll());
    },
    destroyed() {
        window.removeEventListener('mousewheel', this.throttleHandleScroll());
    }
}
</script>

<style lang="less" scoped>
@import "../../styles/common";
.carouse-img {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 680px;
    img {
        width: 100%;
    }
    @keyframes toBottom {
        0% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-6px);
        }

        100% {
            transform: translateY(0);
        }
    }
    @keyframes indicatorBgcChange {
        100% {
            background-color: #4f68e5;
        }
    }
    .indicator-container {
        position: fixed;
        top: 0;
        right: 0;
        display:flex;
        justify-content:center;
        align-items:center;
        z-index: 1000;
        width: 100px;
        height: 100%;

        .indicator-item {
            list-style-type: none;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            cursor: pointer;
            background-color: rgba(182, 187, 195, .7);
            border: 1px solid #ffffff;
            margin-bottom: 20px;
        }
        .indicator-item_active {
            animation: indicatorBgcChange .7s;
            animation-fill-mode: forwards;
        }
    }
    .image-container {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        .welcome {

            .btn-container {
                display: flex;
                justify-content: start;
                margin-top: 20px;
                cursor: pointer;
            }

            .btn {
                height: 48px;
                width: 127px;
                border: 1px solid rgba(255, 255, 255, 1);
                background-color: rgba(255, 255, 255, 0);
                overflow-wrap: break-word;
                color: rgba(255, 255, 255, 1);
                font-size: 20px;
                letter-spacing: 1px;
                white-space: nowrap;
                line-height: 48px;
                text-align: center;

                &:hover {
                    opacity: .9;
                }
            }
            p {
                font-family: "FZZCHJW--GB1-0", serif;
                font-size: 60px;
                letter-spacing: 6px;
                text-align: left;
            }
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            overflow: hidden;
            text-overflow: ellipsis;
            position: absolute;
            left: 10%;
        }
        .describe {
            width: 50%;
            text-align: center;

            .btn-container {
                display: flex;
                justify-content: center;
                margin-top: 20px;
            }

            .btn {
                height: 48px;
                width: 127px;
                border: 1px solid rgba(255, 255, 255, 1);
                background-color: rgba(255, 255, 255, 0);
                overflow-wrap: break-word;
                color: rgba(255, 255, 255, 1);
                font-size: 20px;
                letter-spacing: 1px;
                white-space: nowrap;
                line-height: 48px;
                text-align: center;
            }

            p:first-child {
                overflow-wrap: break-word;
                color: rgba(255, 255, 255, 1);
                font-size: 40px;
                letter-spacing: 1.5px;
                white-space: nowrap;
            }

            p:last-child {
                overflow-wrap: break-word;
                color: rgba(255, 255, 255, 1);
                font-size: 18px;
                letter-spacing: 1px;
                margin-top: 36px;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .toBottom {
            cursor: pointer;
            width: 100%;
            text-align: center;
            position: absolute;
            bottom: 50px;
            animation: toBottom 2s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            z-index: 4;
        }
    }
    .image1 {
        background: url(../../../assets/images/home/homeImage6.png) no-repeat;
        background-size: 100% 100%;
    }
    .image2 {
        background: url(../../../assets/images/home/homeImage1.jpg) no-repeat;
        background-size: 100% 100%;
    }
    .image3 {
        background: url(../../../assets/images/home/homeImage2.jpg) no-repeat;
        background-size: 100% 100%;
    }
    .image4 {
        background: url(../../../assets/images/home/homeImage3.jpg) no-repeat;
        background-size: 100% 100%;
    }
    .image5 {
        background: url(../../../assets/images/home/homeImage5.jpg) no-repeat;
        background-size: 100% 100%;
    }
}
</style>
